<template>
<div>
  <div style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transform: scale(0.98); text-align: center; margin-top: 15px;">
    <el-card>
      <span style="color: #13c2c2; font-size: 25px;">采购需求分析</span>
    </el-card>
  </div>

  <div style=" transform: scale(0.98); margin-top: 10px;">
    <el-row :gutter="12" style="color: white;">
      <el-col :span="6">
        <el-card shadow="always" >
          <b style="color: black; font-size: 12px;">未处理的采购申请数</b>
          <div  align="center" style="font-size: 100px; margin-top: 30px;">
            {{this.Number}}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" >
         <b style="color: black; font-size: 12px;">采购需求总数</b>
         <div  align="center" style="font-size: 100px; margin-top: 30px;">
           {{this.num}}
         </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
        <b style="color: black; font-size: 12px;">已转订单总数</b>
        <div  align="center" style="font-size: 100px; margin-top: 30px;">
          {{this.orders}}
        </div>
        </el-card>
      </el-col>
      <el-col :span="6"><!-- style="height: 190px; width: 290px;" -->
        <el-card shadow="always" >
        <b style="color: black; font-size: 12px;">物料种类</b>
        <div  align="center" style="font-size: 100px; margin-top: 30px;">
          {{this.Storage}}
        </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <div style=" transform: scale(0.98); margin-top: 10px;">
    <el-row :gutter="24" style="color: white;">
      <el-col :span="12">
        <el-card shadow="always"  ><!-- style="height: 400px; width: 609px;" -->
          <b style="color: black; font-size: 12px;">不同商品的采购需求</b>
         <Treemap></Treemap>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="always"  ><!-- style="height: 400px; width: 609px;"  -->
         <b style="color: black; font-size: 12px;">采购需求状态分布</b>
             <pies></pies>
        </el-card>
      </el-col>

    </el-row>
  </div>

  <div style=" transform: scale(0.98); margin-top: 10px;">
    <el-row :gutter="24" style="color: white;">
      <el-col :span="12">
        <el-card shadow="always"  ><!-- style="height: 400px; width: 609px;" -->
          <b style="color: black; font-size: 12px;">不同产品的采购进度</b>
         <Bidirectional></Bidirectional>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="always"  ><!-- style="height: 400px; width: 609px;"  -->
         <b style="color: black; font-size: 12px;">不同部门的采购进度</b>
             <BroadChart></BroadChart>
        </el-card>
      </el-col>

    </el-row>
  </div>


  <div style=" transform: scale(0.98); margin-top: 10px;">
     <el-col :span="24">
       <el-card shadow="always"  ><!-- style="height: 400px; width: 609px;"  -->

        <p style="color: black; font-size: 12px;"><strong>采购需求进度分析</strong></p>
           <el-table :data="detailList"  >
           	<el-table-column label="采购申请行状态" align="center" prop="demandLineStatus" width="180">
           		<template slot-scope="scope">
           			<dict-tag :options="dict.type.demand_line_status" :value="scope.row.demandLineStatus" />
           		</template>
           	</el-table-column>
           	<el-table-column label="采购申请编号" align="center" prop="purchaseRequestId" width="180" />
           	<el-table-column label="需求行号" align="center" prop="demandLineNumber" />
           	<el-table-column label="采购类型" align="center" prop="typePurchase" width="180">
           		<template slot-scope="scope">
           			<dict-tag :options="dict.type.sys_type_purchase" :value="scope.row.typePurchase" />
           		</template>
           	</el-table-column>
           	<el-table-column label="申请日期" align="center" prop="applicationDate" width="180">
           		<template slot-scope="scope">
           			<span>{{ parseTime(scope.row.applicationDate, '{y}-{m}-{d}') }}</span>
           		</template>
           	</el-table-column>
           	<el-table-column label="产品编号" align="center" prop="productNumber" width="180" />
           	<el-table-column label="产品名称" align="center" prop="productName" />
           	<el-table-column label="单位" align="center" prop="productUnit">
           		<template slot-scope="scope">
           			<dict-tag :options="dict.type.sys_unit" :value="scope.row.productUnit" />
           		</template>
           	</el-table-column>
           	<el-table-column label="需求数量" align="center" prop="requiredQuantity" />
           </el-table>
       </el-card>
     </el-col>

  </div>




</div>
</template>




<script>

import { sunRequiredQuantityt,selectAuditList,countPrice,countDemandLineNumber,exceptList} from "@/api/vendor/fig";

import pies from '../../src/views/Chart/PieChart.vue'
import Treemap from '../../src/views/Chart/Treemap.vue'
import BroadChart from '../../src/views/Chart/BroadChart.vue'
import Bidirectional from '../../src/views/Chart/Bidirectional.vue'

	import {
		listDetail,
		getDetail,
		delDetail,
		addDetail,
		updateDetail
	} from "@/api/orders/detail";


export default {
  dicts: ['sys_unit', 'demand_line_status', 'sys_type_purchase'],
  components:{
    pies,
    Treemap,
    BroadChart,
    Bidirectional
  },
  created() {
    this.getList();
  },
  data() {
    return{
      //未处理的采购申请数
       Number:"",
      //采购需求总数
      num:"",
      //已转订单
      orders:"",
      //物料种类
      Storage:"",
      // 申请明细表格数据
      detailList: [],
      // 查询参数
      queryParams: {
      	pageNum: 1,
      	pageSize: 10,
      	purchaseRequestId: null,
      	typePurchase: null,
      	applicationDate: null,
      	person: null,
      	productNumber: null,
      	productName: null,
      	productUnit: null,
      	demandLineNumber: null,
      	requiredQuantity: null,
      	expectedDeliveryDate: null,
      	expectedSupplierId: null,
      	demandLineStatus: null,
      	requestId: null,
      	inquiryDemandNumber: null
      },
      // 表单参数
      form: {},
    }
  },
  methods:{

    getList() {
      //未处理的采购申请数
      selectAuditList().then(response => {
          //onsole.log("1111:", response.rows.length);
          this.Number=response.rows.length;
      });
      //采购需求总数
      sunRequiredQuantityt().then(response => {
          //console.log("1111:", response);
          this.num=response;
      });
      countDemandLineNumber().then(response => {
          //console.log("1111:", response);
          this.orders=response;
      });
      countPrice().then(response => {
          //console.log("1111:", response);
          this.Storage=response;
      });
      // exceptList().then(response => {
      //     console.log("1111:", response);
      //    // this.Storage=response;
      // });
      listDetail(this.queryParams).then(response => {
      	this.detailList = response.rows;
      	this.total = response.total;
      	this.loading = false;
      });
    },


  }

};
</script>




<style>


</style>
